<script setup>
import { ref } from "vue"
import IndentState from "./IndentState.vue";


const indentBatchVOList=ref([
  {
    indentBatch: [
      {
        id:1,
        commentId:2,
        userId:3,
        batchId:4,
        roomTypeId:5,
        description:"des1",
        amount:6,
        checkInTime:new Date(),
        checkOutTime:new Date(),
        indentBatchGenerationTime:new Date(),
        indentState:"CANCELED",
        hotelId:7,
      },
      {
        id:1,
        commentId:2,
        userId:3,
        batchId:4,
        roomTypeId:5,
        description:"des1",
        amount:6,
        checkInTime:new Date(),
        checkOutTime:new Date(),
        indentBatchGenerationTime:new Date(),
        indentState:"CANCELED",
        hotelId:7,
      }
    ],
    totalAmount: 100.1,

  },
  {
    indentBatch: [
      {
        id:1,
        commentId:2,
        userId:3,
        batchId:4,
        roomTypeId:5,
        description:"des1",
        amount:6,
        checkInTime:new Date(),
        checkOutTime:new Date(),
        indentBatchGenerationTime:new Date(),
        indentState:"CREATED",
        hotelId:7,
      },
    ],
    totalAmount: 200.1,

  }
])

const indentBatchVOListCache=ref([])

const loadIndentBatchVO = () => {
  if(indentBatchVOListCache.value.length<indentBatchVOList.value.length){
    indentBatchVOListCache.value.push(indentBatchVOList.value[indentBatchVOListCache.value.length])
  }
}
const activeOrder = ref("");

const getHotelById = (id)=>{
  console.log(id)
  return {
    name:"HOTELNAME"
  }
}
const getRoomTypeById = (id)=>{
  return{
    type:"BIGBED"
  }
}
const timeFormat = (mystime)=>{
  var addstime = mystime.getFullYear() +'-'  + fullNum(Number(mystime.getMonth()) + 1)+ '-'
      + fullNum(mystime.getDate())+ ' '+ fullNum(mystime.getHours())+ ":"
      + fullNum(mystime.getMinutes()) + ":" +fullNum(mystime.getSeconds());
  return addstime;

}
const fullNum=(obj)=>{
  if(Number(obj)<10){
    return '0'+obj;
  }else{
    return obj;
  }

}
</script>

<template>
  <ul v-infinite-scroll="loadIndentBatchVO" class="infinite-list">
    <el-collapse v-model="activeOrder" v-for="(item, index) in indentBatchVOListCache">
      <el-collapse-item  :name="index">
        <template #title>
          <span>{{getHotelById(item.indentBatch[0].hotelId).name}}</span>
          <span width="10rem"></span>
          <span>{{getRoomTypeById(item.indentBatch[0].roomId).type}}</span>
          <span>{{timeFormat(item.indentBatch[0].indentBatchGenerationTime)}}</span>
          <span class="price">￥ {{ item.totalAmount }}</span>
         <IndentState :indentState="item.indentBatch[0].indentState" :fontSize="10"/>

        </template>
        <div>{{index}}</div>
      </el-collapse-item>
    </el-collapse>
  </ul>
</template>
<style>
.price {
  font-size: 28px;
  color: orange;
}
</style>
